<template>
  <div id='home'>
    <el-row>
      <el-col :xs="24" :sm="6" :md="5" :lg="4" :xl="3" class="colOne">
        <div class="grid-content bg-purple">
          <el-menu default-active="1" class="el-menu-vertical-demo" background-color="#2b2e33" text-color="#fff"
            unique-opened router active-text-color="#ffd04b">
            <el-menu-item>
              <el-row :gutter="20">
                <b>
                  <el-col style="color: #2dafcb;" class="sp" :xs="6" :sm="6" :md="24" :lg="24" :xl="24">
                    HAPPY
                  </el-col>
                  <el-col class="sp" :xs="12" :sm="6">
                    MMALL
                  </el-col>
                </b>
              </el-row>

            </el-menu-item>
            <el-menu-item index="/" @click="me('首页')">
              <i class="el-icon-s-home"></i>
              <span slot="title">首页</span>
            </el-menu-item>
            <el-submenu :index="k+''" v-for="(item,k) in menu" :key="item.path">
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{item.name}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item :index="it.path" v-for=" it in item.children" :key="it.path" @click="me(it.name)">
                  {{it.name}}</el-menu-item>
              </el-menu-item-group>
            </el-submenu>
            <!-- <el-submenu :index="k+''" v-for="(item,k) in menu" :key="item.path">
              <template slot="title">
                <i :class="item.icon"></i>
                <span>{{item.name}}</span>
              </template>
              <el-menu-item-group>
                <el-menu-item index="/echarts/index" @click="me('ECharts')">
                  <i class="el-icon-s-home"></i>
                  <span slot="title">EChart</span>
                </el-menu-item>
              </el-menu-item-group>
            </el-submenu> -->
          </el-menu>

        </div>
      </el-col>
      <el-col :xs="24" :sm="18" :md="19" :lg="20" :xl="21" class="colTwo">
        <div class="grid-content bg-purple-light">
          <div class="aaa">
            <i class="el-icon-back" @click="$router.go(-1)"></i>
            <el-dropdown @command="handleCommand">

              <span class="el-dropdown-link">
                <i class="el-icon-user-solid"></i>
                欢迎，{{uname}}<i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="a"><i class="el-icon-right"></i> 退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <el-main>
            <router-view />
          </el-main>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import {
    Container,
    Aside,
    Main,
    Menu,
    Submenu,
    MenuItemGroup,
    MenuItem,
    Row,
    Col,
    Dropdown,
    DropdownItem,
    DropdownMenu,
  } from 'element-ui';
  export default {
    components: {
      'el-container': Container,
      'el-aside': Aside,
      'el-main': Main,
      "el-menu": Menu,
      "el-submenu": Submenu,
      'el-menu-item-group': MenuItemGroup,
      'el-menu-item': MenuItem,
      'el-row': Row,
      'el-col': Col,
      'el-dropdown': Dropdown,
      'el-dropdown-item': DropdownItem,
      'el-dropdown-menu': DropdownMenu,
    },
    data() {
      return {
        uname: JSON.parse(sessionStorage.getItem('admin')).admin || '',
        menu: [
          // {
          //   path:'/',
          //   name:'首页',
          //   icon:'el-icon-s-home'
          // },
          {
            name: '商品',
            icon: 'el-icon-s-fold',
            children: [{
                path: '/product/index',
                name: '商品管理'
              },
              {
                path: '/product-category/index',
                name: '品类管理'
              },
            ]
          }, {
            name: '订单',
            icon: 'el-icon-tickets',
            children: [{
              path: '/order/index',
              name: '订单管理'
            }, ]
          }, {
            name: '用户',
            icon: 'el-icon-s-custom',
            children: [{
              path: '/user/index',
              name: '用户列表'
            }, ]
          }, {
            name: 'Echarts',
            icon: 'el-icon-s-fold',
            children: [{
                path: '/echarts/index',
                name: 'EChaets'
              },
              {
                path: '/chart/index',
                name: 'chart'
              },
            ]
          },
        ],
      };
    },
    methods: {
      handleCommand(command) {
        // this.$message('click on item ' + command);
        // console.log('exit');
        sessionStorage.removeItem('admin')
        this.$router.push('/login')
      },
      me(name) {
        // console.log(name);
        sessionStorage.setItem('menu', name)
      }
    },
    mounted() {},
    computed: {

    },
  }
</script>
<style lang='scss'>
  // .colOne {
  // width: 100%;
  // max-width: 200px;
  // }

  .colTwo {
    // width: 100%;
    height: 100% !important;
  }


  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #f6f8fbaa;
  }

  .bg-purple-light {
    background: rgb(248, 244, 244);
  }

  .grid-content {
    min-height: 100px;
    min-width: 200px;
    height: 100%;
  }

  #home {
    background: #2b2e33;
  }

  #home,
  .el-container,
  .el-aside,
  .el-menu,
  .el-row {
    width: 100%;
    height: 100%;

    .el-main {
      width: 100%;
      height: 90%;
      padding-top: 0 !important;
    }
  }

  .aaa {
    width: 100%;
    height: 56px;
    background: white;

    // box-shadow: 3px 3px 2px 2px gainsboro;
    &>i {
      height: 100%;
      line-height: 56px;
      margin-left: 20px;

    }

  }

  .el-dropdown {
    float: right;
    margin-right: 40px;
    margin-top: 17px;
  }


  .el-dropdown-menu {
    width: 240px !important;
    border-radius: 1px;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: gray;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }

  .sp {
    font-size: 26px;
    background: transparent;
  }
</style>